let content = document.querySelector('.content');
let wrapper = document.querySelector('.wrapper');
let con = document.querySelector('.con');
let h2 = document.querySelector('h2');
let mainBtn = document.querySelector('.main');
let startBtn = document.querySelector('.start');
let score = document.querySelector('.score');
let screenSize = ~~(document.documentElement.clientHeight / 100) * 100 - 100;
let cellArr,
  randomNum,
  row,
  item,
  speed,
  timer,
  play,
  scoreVal = 0;
let flag = false;

wrapper.style.width = `${screenSize}px`;
wrapper.style.height = `${screenSize}px`;

//创建div并设置类名
function createDiv(className) {
  let div = document.createElement('div');
  div.className = className;
  return div;
}

//彩色块
function isColor() {
  while (true) {
    var r = Math.floor(Math.random() * 255);
    var g = Math.floor(Math.random() * 255);
    var b = Math.floor(Math.random() * 255);
    if (r != 255 && g != 255 && b != 255) {
      break;
    }
  }
  return `rgba(${r},${g},${b})`;
}

//创建白块类名
function createCell(item) {
  if (item === 4) {
    cellArr = ['cell', 'cell', 'cell', 'cell'];
    randomNum = Math.round(Math.random() * 3);
    cellArr[randomNum] = 'cell black';
    return cellArr;
  } else if (item === 5) {
    cellArr = ['cell1', 'cell1', 'cell1', 'cell1', 'cell1'];
    randomNum = Math.round(Math.random() * 4);
    cellArr[randomNum] = 'cell1 black';
    return cellArr;
  } else {
    cellArr = [
      'cell2',
      'cell2',
      'cell2',
      'cell2',
      'cell2',
      'cell2',
      'cell2',
      'cell2',
    ];
    randomNum = Math.round(Math.random() * 7);
    cellArr[randomNum] = 'cell2 black';
    return cellArr;
  }
}

//创建四行
function createRow() {
  play = createDiv('play');
  play.style.height = `${screenSize}px`;
  while (play) {
    if (play.childElementCount === 4) {
      break;
    }
    row = createDiv('row');
    row.style.height = `${screenSize / 4}px`;
    cellArr = createCell(item);
    play.appendChild(row);
    for (let i = 0; i < cellArr.length; i++) {
      row.appendChild(createDiv(cellArr[i]));
    }
  }

  if (con.firstChild == null) {
    con.appendChild(play);
  } else {
    con.insertBefore(play, con.firstChild);
  }
}

//运动
function run() {
  let top = parseInt(window.getComputedStyle(con, null).top);
  speed + top > 0 ? (top = 0) : (top += speed);
  con.style.top = top + 'px';

  if (parseInt(top) >= -600) {
    createRow();
    con.style.top = '-1200px';
  } else {
    top += speed;
  }

  scoreVal === 2 && (speed = 7);
  scoreVal === 7 && (speed = 9);

  // 当play为4的时候，删除最后一个play
  if (con.childElementCount == 4) {
    con.removeChild(con.lastChild);
  }

  fail();
}

//点击黑块事件
con.addEventListener('click', (e) => {
  if (flag) {
    if (e.target.className.includes('black')) {
      e.target.classList.remove('black');
      score.innerText = `${++scoreVal}`;
      e.target.parentNode.pass = 1;
    } else {
      //游戏结束
      over();
    }
  }
});

//触底结束
function fail() {
  let blacks = document.querySelectorAll('.black');
  console.log(con.offsetTop);
  // console.log(con.childNodes);
  // if (rows.length == 3 && rows[rows.length - 1].pass !== 1) {
  //   // over();
  //   console.log(111);
  // }
}

//游戏结束
function over() {
  flag = false;
  clearInterval(timer);
}

content.addEventListener('click', function (e) {
  if (!flag) {
    flag = true;
    this.children[0] === e.target && (item = 4);
    this.children[1] === e.target && (item = 5);
    this.children[2] === e.target && (item = 8);

    start();

    createRow();
    createRow();
    createRow();
    timer = setInterval(run, 50);
  }
});

function start() {
  con.innerHTML = ``;
  con.style.top = ``;
  speed = 5;
  scoreVal = 0;
  score.innerText = `${scoreVal}`;
  content.style.display = `none`;
}

mainBtn.addEventListener('click', () => {
  if (!flag) {
    start();
    content.style.display = `block`;
  }
});

startBtn.addEventListener('click', () => {
  if (!flag) {
    item == undefined && (item = 4);
    flag = true;
    scoreVal = 0;
    score.innerText = `${scoreVal}`;
    start();
    createRow();
    createRow();
    createRow();
    timer = setInterval(run, 50);
  }
});
